<template>
  <el-container>
    <el-header>
      <div class="client_head">
        <div class="client_head_title"><a>客服中心</a></div>
      <div class="client_head_nav">
        <p>当前位置:&nbsp
        <a href="">首页</a>
          &nbsp>>&nbsp
        <a href="">客服中心</a>
        </p>
      </div>
      </div>
    </el-header>
    <el-main>
      <div id="test2">
        <div class="main">
          <div>
          <h2 class="title">联系方式</h2>
           <div class="pic">


             <div ><p>通过QQ联系</p></div>
             <div>
               <a href="tencent://AddContact/?fromId=50&fromSubId=1&subcmd=all&uin=619699629" >
                 <img src="../../../assets/qq.png" >
               </a>
             </div>
           </div>

            <div class="pic">
            <div><p>通过微信公众号 </p></div>
            <div><img src="../../../assets/weixinlianxiwomen.png" @mouseenter="QRcode=true" @mouseleave="QRcode=false">
            </div>
            </div>
          <p>通过邮箱&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;service@softpark.gov.cn</p>

            <h2 class="title">园区联系电话</h2>
            <div class="tel">
            <p>招商咨询:023-63561111</p>
            <p>孵化器招商咨询:023-63560000</p>
            <p>物业服务中心:023-63210099</p>
            </div>
          </div>
        </div>
        <img src="../../../assets/QRcode.png" v-show="QRcode" class="QRcode">
      </div>

    </el-main>

  </el-container>

</template>


<style scoped>

  .client_head{
    width: 1000px;
    display: flex;
    align-items: center;
    justify-content: space-between;

    border-bottom: 1px solid;
    color: #517bc0;

  }
  .client_head_title{

  }
  .client_head_title a {
    color: #517bc0;
    font-size: 25px;
    font-weight: bold;
    font-family: "Microsoft Yahei";
  }

  .client_head_nav p{
    font-size: 12px;
    color: black;


  }
  .client_head_nav a{
    text-decoration:none;
  }


  .el-header{

    color: #000000;
    display: flex;
    justify-content: center;
    text-align: center;
    line-height: 40px;
  }
  .el-footer {
    background-color:#E9EEF3 ;
    color: #000000;
    text-align: center;
    line-height: 60px;
    display: flex;
    justify-content: center;

  }
  .main{

    height: 650px;
    float: left;
    display: flex;
    text-align: left;


  }

  #test1 {
    width: 1230px;
    background-color: #2c3e50;
    display: flex;
    justify-content: space-between;
  }
  #test2 {
    width: 900px;
    height: 650px;



  }




  .el-main {

    color: #333;

    margin:  auto;
  }

  .title{
    color: #517bc0;
    font-size: 20px;
    font-weight: bold;
    font-family: "Microsoft Yahei";
    line-height: 40px;


  }
  .main  p{
   line-height: 50px;
    font-size: 13px;
    padding-right:20px;


  }

   .pic {
     display: flex;

     align-items: center;
   }

  .pic img{
    line-height: 50px;
  }

  .QRcode{
    position: relative;
    top: 120px;
  }

  .tel p{
    line-height: 20px;
  }






</style>

<script>
  import Vue from 'vue'


    export default {
    name:'userCenter',
     data:function () {
       return {
         QRcode:false
       }

     }
    }
</script>

